import React from "react";
import { Tilt } from "react-tilt";
import { motion } from "framer-motion";
import { styles } from "../styles.js";
import { services } from "../constants/index.js";
import { fadeIn, textVariant } from "../utils/motion.js";
import { SectionWrapper } from "../hoc";

const ServiceCard = ({ index, title, icon }) => {
  return (
    <Tilt className={"xs:w-[250px] w-full"}>
      <motion.div
        variants={fadeIn("right", "spring", 0.5 * index, 0.7)}
        className={"w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card"}
      >
        <div
          options={{
            max: 45,
            scale: 1,
            speed: 450
          }}
          className={"bg-tertiary rounded-[20px] py-5 px-12 min-h-[280px] flex justify-evenly items-center flex-col"}
        >
          <img src={icon} alt={title} className={"w-16 h-16 object-contain"} />
          <h3 className={"text-white text-[20px] font-bold text-center"}>{title}</h3>
        </div>
      </motion.div>
    </Tilt>
  );
};

const About = () => {
  return (
    <>
      <motion.div variants={textVariant()}>
        <p className={styles.sectionSubText}>
          The best or nothing
        </p>
        <h2 className={styles.sectionHeadText}>
          自我介绍.
        </h2>
      </motion.div>
      <motion.p
        variants={fadeIn("", "", 0.1, 1)}
        className={"mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]"}
      >

        练习时长不到两年半的前端开发工程师，在Vue和JavaScript方面有丰富的经验，在React、Node.js、Webpack和Three.js等框架方面也有专业知识。
        自我学习能力强，善于在工作中提出问题、发现问题、解决问题，有较强的分析能力。创建高效、可扩展、用户友好的解决方案，解决用户需求。让我们一起努力，把你的想法变成现实！
      </motion.p>
      <div className={"mt-20 flex flex-wrap gap-10"}>
        {services.map((service, index) => (
          <ServiceCard key={service.title} index={index} {...service} />
        ))}
      </div>
    </>
  );
};

export default SectionWrapper(About, "about");

